<template>
  <div>
    <h4>HelloB</h4>
    <p>{{ myA }} - {{ myB }} - {{ myD }}</p>
  </div>
</template>

<script>
// 引入 mapState
import { mapState } from "vuex";

export default {
  data() {
    return {
      count: 100,
    };
  },
  computed: {
    ...mapState({
      // key: value
      //    key - 你自己定义的一个计算属性的名字
      //    value - 'a'  state 的 某个值
      myA: "a", // value 值是字符串的形式  this.$store.state.a

      myB: (state) => {
        // value 值是函数的形式，这个函数会自动接收到 state 参数，
        console.log("===", state);
        return state.b + state.a;
      },

      myC: (state) => state.c,

      myD: function (state) {
        // value 值是普通函数的形式，这个函数会自动接收到 state 参数，只是这里可以使用 this 了。this 是当前组件的实例对象
        return state.a + this.count;
      },
    }),
  },

  // computed: {
  //   myA() {
  //     return this.$store.state.a;
  //   },

  //   myB() {
  //     return this.$store.state.a + this.$store.state.b;
  //   },

  //   myC() {
  //     return this.$store.state.c;
  //   },

  //   myD() {
  //     return this.$store.state.a + this.count;
  //   },
  // },
};
</script>
